import React, { useEffect, useState } from 'react';

/* 引入antd */
import { Table, Modal, Space, Input, Button, Select, Form } from 'antd';

/* 引入上下文 */
import useStore from "../../../context/useStore";

import { useObserver } from 'mobx-react-lite';

const { confirm } = Modal;

const { Option } = Select;

export default function ClassManager() {

  const { manager, questions } = useStore();

  useEffect(() => {
    /* 获取分配好的班级 */
    manager.getAllRoomListAction();
    /* 获取没有分配教室的班级 */
    manager.getNoRoomListAction();
    /*  manager.getAllDataAction() */
    /* 获取教室号 */
    manager.getRoomListAction();
    /* 获取所有的课程 */
    questions.getSubjectListAction();

  }, [manager, questions]);

  /* 对话框开关 */
  const [visible, setVisible] = useState<boolean>(false);

  /* 点击确定 */
  /*function handleOk() {
     调用添加试题类型接口 */
  /*  manager.addClassManagerAction(grade_name, room_id, subject_id);
   console.log('确定。。', grade_name, room_id, subject_id);
 

   setVisible(false)
 };*/


  /* 修改班级 */
  function updateClassRoom(grade_id: string, grade_name?: string, subject_id?: string, room_id?: string) {


    /* confirm({
      title: '确定要修改吗?',
      onOk() {
        manager.classManagerUpdateAction(grade_id,grade_name,subject_id,room_id);
      },
      onCancel() { },
      okText: "确定",
      cancelText: "取消"
    }); */
  }

  /* 删除班级 */
  function delClassRoom(grade_id: string) {
    confirm({
      title: '确定要删除吗?',
      onOk() {
        manager.delAllRoomListItemAction(grade_id);
      },
      onCancel() { },
      okText: "确定",
      cancelText: "取消"
    });
  }

  const columns = [
    {
      title: '班级名',
      dataIndex: 'grade_name',
      key: 'grade_id',
    },
    {
      title: '课程名',
      dataIndex: 'subject_text',
      key: 'subject_id',
    },
    {
      title: '教室号',
      dataIndex: 'room_text',
      key: 'room_id',
    },
    {
      title: '操作',
      key: 'action',
      render: (record: any) => (
        <Space size="middle">
          <button onClick={() => { updateClassRoom(record.grade_id, record.grade_name, record.subject_id, record.room_id) }}>修改</button> |
          <button onClick={() => { delClassRoom(record.grade_id) }}>删除</button>
        </Space>
      )
    },
  ];

  const onFinish = (values: any) => {
    console.log(values.manager);
    /* 调用添加班级接口 */
    manager.addClassManagerAction(values.manager);
    /* 关闭对话框 */
    setVisible(false)
  };

  /* 样式布局 */
  const layout = {
    labelCol: { span: 2 },
    wrapperCol: { span: 16 },
  };

  /* 验证 */
  const validateMessages = {
    required: `${'label'} is required!`,
    types: {
      email: `${'label'}`,
      number: `${'label'} is not a validate number!`,
    },
    number: {
      range: `${'label'} must be between ${'min'} and ${'max'}`,
    },
  };



  return useObserver(() => <div>
    <h2>班级管理</h2>
    <div>
      <Button type="primary" onClick={() => { setVisible(true) }} style={{ marginBottom: 20 }}>
        +添加班级
        </Button>
      <Table rowKey={columns[0].key} columns={columns} dataSource={manager.allRoomList.concat(manager.noRoomList)} />

      <Modal
        title="添加班级"
        visible={visible}
        onOk={() => { setVisible(false) }}
        onCancel={() => { setVisible(false) }}
        okText="确认"
        cancelText="取消"
        footer={null}
      >
        <h3>班级名称</h3>
        <Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages} initialValues={{ room_text: '', subject_text: '' }}>
          <Form.Item name={['manager', 'grade_name']} >
            <Input placeholder="请输入班级名" />
          </Form.Item>

          <h3>教室号</h3>
          <Form.Item
            name={['manager', 'room_id']}
            hasFeedback

          >
            <Select style={{ width: 120 }} >
              {
                manager.roomList.map((item: any) => {
                  /*  console.log('教室号。。。', item); */
                  return <Option value={item.room_id} key={item.room_id}>{item.room_text}</Option>
                })
              }
            </Select>
          </Form.Item>

          <h3>课程类型</h3>
          <Form.Item
            name={['manager', 'subject_id']}
            hasFeedback
            rules={[{ required: true, message: '请选择考试类型!' }]}
          >
            <Select style={{ width: 120 }} >
              {
                questions.subjectList.map((item: any) => {
                  /* console.log('课程类型。。。', item); */
                  return <Option value={item.subject_id} key={item.subject_id}>{item.subject_text}</Option>
                })
              }
            </Select>
          </Form.Item>
          {/* 按钮 */}
          <Form.Item style={{ marginTop: 20,textAlign: 'center' }} >
            <Button type="primary" htmlType="submit" style={{ marginRight: 20 }}>确定</Button>
            <Button onClick={() => { setVisible(false) }}>取消</Button>
          </Form.Item>
        </Form>
      </Modal>

    </div>
  </div>
  )
}
